/***浜у搧涓績***/
/*$$
{"color":[{"val":"#26334c","title":"鏍忕洰鏍囬棰滆壊"},{"val":"rgba(255,255,255,.6)","title":"榛樿鏍囬鏂囧瓧棰滆壊"},{"val":"#fff","title":"榧犳爣婊戣繃鏂囧瓧棰滆壊"},{"val":"#a1a7b2","title":"榛樿鏍囬鏂囧瓧棰滆壊"}],"background":[{"val":"#e6e8ed","title":"杈规绾胯儗鏅壊"},{"val":"#f2f4f7","title":"妯″潡鑳屾櫙棰滆壊"},{"val":"rgba(255,255,255,.37)","title":"鐧借壊杈规"},{"val":"#6160ea","title":"榧犳爣婊戣繃杈规鑳屾櫙棰滆壊"}],"border":[]}
$$*/
#product_145{
width: 1200px;
margin: 0 auto;
height: auto;
padding:70px 0;
display: flex;
align-items: stretch;
}
#product_145 .swiper-container{
height: 100%;
}
#product_145 .product-swiper{
height: 100%;
}
#product_145 .product-right{
width: 65%;
float: right;
position: relative;
transition: all 0.36s ease;
}
#product_145 .product-right .contR{
position: absolute;
width: 100%;
height:100%;
z-index: 10;
color: #fff;
left:0;
top:0;
}
#product_145 .product-right .contR .top{
width: 84%;
margin: auto;
position: absolute;
left: 8%;
top: 8%;
}
#product_145 .product-right .contR .titEn{
font-size:14px;
display: block;
line-height: 24px;
color: rgba(255,255,255,.6);
}
#product_145 .product-right .contR .titCn{
font-size:24px;
display: block;
line-height: 36px;
color: rgba(255,255,255,.6);
}
#product_145 .product-right .contR:hover .titEn,
#product_145 .product-right .contR:hover .titCn{
color: #fff;
}
#product_145 .product-right .bottom{
width: 84%;
margin: auto;
position: absolute;
left: 8%;
bottom: 8%;
}
#product_145 .product-right .bottom .intr{
font-size: 14px;
line-height: 30px;
padding-bottom: 20px;
display: block;
}
#product_145 .product-right .bottom .more{
overflow: hidden;
line-height: 30px;
display: block;
position: relative;
}
#product_145 .product-right .bottom .more::before{
background:rgba(255,255,255,.37);
position: absolute;
content: '';
width: 100%;
top:0;
left:0;
height: 2px;
}
#product_145 .product-right .bottom .more::after{
position: absolute;
content: '';
width: 0;
height: 2px;
background: #6160ea;
top:0;
left:0;
transition: width 0.5s;
}
#product_145 .contR:hover .bottom .more::after{
width: 100%;
z-index: 10;
}
#product_145 .product-right .bottom .more i{
background: url(/static/images/CP00001_01.png) no-repeat left center;
background-size:100% 14px;
float: right;
width: 26px;
height: 30px;
}
#product_145 .imgBox{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#product_145 .imgBox .bg{
background: url(/static/images/CP00001_02.png) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
z-index: 10;
}
#product_145 .imgBox .imgT{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 0;
top:0;
transition:transform .3s ease;
}
#product_145 .product-right:hover .imgT{
transform:scale(1.03);
}
#product_145 .product-left{
width: 35%;
float: left;
box-sizing: border-box;
}
#product_145 .product-left .className{
width: 100%;
position: relative;
color: #26334c;
}
#product_145 .product-left .title-1{
font-size: 35px;
line-height: 50px;
padding-left: 30px;
position: relative;
text-transform: uppercase;
font-weight: bold;
}
#product_145 .product-left .title-1 i{
display: block;
width: 25px;
height: 17px;
position: absolute;
left: 0;
top: 14px;
background: url(/static/images/CP00001_03.png) no-repeat;
}
#product_145 .product-left .title-2{
padding-left: 30px;
font-size: 24px;
line-height: 50px;
}
#product_145 .product-left .product-nav{
margin-top:44px;
position: relative;
overflow: hidden;
width: 100%;
width:calc(100% - 10px);
}
#product_145 .product-nav img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
width: auto !important;
height: auto !important;
z-index: 1;
}
#product_145 .product-nav a.cur{
}
#product_145 .product-nav a .showImg,
#product_145 .product-nav a.cur .hideImg{
display: block;
}
#product_145 .product-nav a .hideImg,
#product_145 .product-nav a.cur .showImg{
display: none;
}
#product_145 .product-left .product-nav a{
display: block;
overflow: hidden;
background:#f2f4f7;
position: relative;
float: left;
width: 50%;
box-sizing: border-box;
padding: 5%;
border-right: solid 1px #e6e8ed;
border-bottom: solid 1px #e6e8ed;
}
#product_145 .product-nav a i{
display: block;
position: relative;
width: 50px;
height: 50px;
margin-bottom: 20px;
overflow: hidden;
}
#product_145 .product-nav a span{
display: block;
font-size: 14px;
padding-bottom: 5px;
color: #a1a7b2;
overflow: hidden;
height: 24px;
width: 100%;
line-height: 24px;
}
#product_145 .product-nav a strong{
display: block;
font-size: 16px;
height: 48px;
line-height: 24px;
color: #a1a7b2;
}
#product_145 .product-nav a.cur {
background:#6666eb url('/static/images/CP00001_04.png') right bottom no-repeat;
background-size: cover;
}
#product_145 .product-nav a.cur span{
color: #fff;
opacity: .6;
width: 100%;
overflow: hidden;
}
#product_145 .product-nav a.cur strong{
color: #fff;
width: 100%;
overflow: hidden;
}
/* 涓瓑灞忓箷 妗岄潰鏄剧ず */
@media screen and (max-width:1200px) {
#product_145{
width: 96%;
padding:20px 0;
}
}
/* ipad */
@media screen and (max-width:992px){
#product_145 .product-nav a i{
margin-bottom: 10px;
}
#product_145 .sBox .text .title-1{
font-size: 50px;
}
#product_145 .sBox .text .title-2{
font-size: 18px;
}
}
/* 鎵嬫満 */
@media screen and (max-width:767px){
#product_145{
width: 100%;
display: block;
}
#product_145 .product-left{
width: 100%;
padding: 0 5%;
}
#product_145 .product-left .product-nav{
width: 100%;
margin-top: 15px;
}
#product_145 .product-nav a span{
font-size: 12px;
}
#product_145 .product-right{
width: 100%;
padding: 0 5%;
margin-top: 15px;
}
#product_145 .product-right .bottom .intr{
display: none;
}
#product_145 .product-right .contR .titCn{
font-size: 18px;
}
#product_145 .imgBox .imgT{
position: relative;
height: 220px;
}
#product_145 .product-left .title-1{
font-size: 30px;
line-height: 36px;
}
#product_145 .product-left .title-2{
font-size: 20px;
}
}